<template>
    <div class="banner-wrap">
        <swiper :options="swiperOption" ref="mySwiper" v-if="list.length>0">
            <swiper-slide v-for="(item, index) of list" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
  export default {
    name: 'homeBanner',
    props:{
      list:Array
    },
    data () {
      return {
        swiperOption:{
          loop:true,
          pagination: {
            el: '.swiper-pagination'
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        }
      }
    },

  }
</script>

<style lang="stylus" scoped>
    .banner-wrap
        /*使图片宽高比为32*/
        width 100%
        height 0
        overflow hidden
        padding-bottom 32%
    .swiper-img
        width 100%
        /*样式穿透，跳出scoped的限制*/
    .banner-wrap>>>.swiper-pagination-bullet-active
        background-color #fff
</style>
